<template>
  <div class="register-page">
    <div class="register-container">
      <div class="register-box">
        <div class="register-header">
          <img src="@/assets/logo.png" alt="Logo" class="logo">
          <h2>用户注册</h2>
        </div>
        
        <el-form 
          ref="registerForm"
          :model="registerForm"
          :rules="rules"
          class="register-form"
        >
          <el-form-item prop="username">
            <el-input
              v-model="registerForm.username"
              placeholder="请输入用户名"
              prefix-icon="User"
            />
          </el-form-item>
          
          <el-form-item prop="phone">
            <el-input
              v-model="registerForm.phone"
              placeholder="请输入手机号"
              prefix-icon="Phone"
            >
              <template #append>
                <el-button 
                  :disabled="!!countdown || !isPhoneValid" 
                  @click="handleSendCode"
                >
                  {{ countdown ? `${countdown}s后重新发送` : '获取验证码' }}
                </el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="code">
            <el-input
              v-model="registerForm.code"
              placeholder="请输入验证码"
              prefix-icon="Key"
            />
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input
              v-model="registerForm.password"
              type="password"
              placeholder="请设置密码"
              prefix-icon="Lock"
              show-password
            />
          </el-form-item>
          
          <el-form-item prop="confirmPassword">
            <el-input
              v-model="registerForm.confirmPassword"
              type="password"
              placeholder="请确认密码"
              prefix-icon="Lock"
              show-password
            />
          </el-form-item>

          <div class="agreement">
            <el-checkbox v-model="registerForm.agreement">
              我已阅读并同意
              <el-link type="primary" :underline="false" @click="showAgreement">
                《用户协议》
              </el-link>
              和
              <el-link type="primary" :underline="false" @click="showPrivacy">
                《隐私政策》
              </el-link>
            </el-checkbox>
          </div>
          
          <el-button 
            type="primary" 
            class="register-button"
            :loading="loading"
            @click="handleRegister"
          >
            注册
          </el-button>
          
          <div class="other-options">
            <span>已有账号？</span>
            <el-link type="primary" :underline="false" @click="handleLogin">
              立即登录
            </el-link>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { User, Lock, Phone, Key } from '@element-plus/icons-vue';

export default defineComponent({
  name: 'Register',
  components: {
    User,
    Lock,
    Phone,
    Key
  },
  setup() {
    const router = useRouter();
    const registerForm = reactive({
      username: '',
      phone: '',
      code: '',
      password: '',
      confirmPassword: '',
      agreement: false
    });
    
    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, message: '用户名长度不能小于3位', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
      ],
      code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { len: 6, message: '验证码长度应为6位', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value !== registerForm.password) {
              callback(new Error('两次输入的密码不一致'));
            } else {
              callback();
            }
          },
          trigger: 'blur'
        }
      ]
    };
    
    const loading = ref(false);
    const countdown = ref(0);
    
    const isPhoneValid = computed(() => {
      return /^1[3-9]\d{9}$/.test(registerForm.phone);
    });

    const startCountdown = () => {
      countdown.value = 60;
      const timer = setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    };
    
    const handleSendCode = async () => {
      try {
        // 模拟发送验证码
        await new Promise(resolve => setTimeout(resolve, 1000));
        ElMessage.success('验证码已发送');
        startCountdown();
      } catch (error) {
        ElMessage.error('验证码发送失败，请重试');
      }
    };
    
    const handleRegister = async () => {
      if (!registerForm.agreement) {
        ElMessage.warning('请阅读并同意用户协议和隐私政策');
        return;
      }
      
      loading.value = true;
      try {
        // 模拟注册请求
        await new Promise(resolve => setTimeout(resolve, 1000));
        ElMessage.success('注册成功');
        router.push('/login');
      } catch (error) {
        ElMessage.error('注册失败，请重试');
      } finally {
        loading.value = false;
      }
    };
    
    const handleLogin = () => {
      router.push('/login');
    };
    
    const showAgreement = () => {
      // 显示用户协议
    };
    
    const showPrivacy = () => {
      // 显示隐私政策
    };
    
    return {
      registerForm,
      rules,
      loading,
      countdown,
      isPhoneValid,
      handleSendCode,
      handleRegister,
      handleLogin,
      showAgreement,
      showPrivacy
    };
  }
});
</script>

<style scoped lang="scss">
.register-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $background-color-base;
}

.register-container {
  width: 100%;
  max-width: 420px;
  padding: $spacing-base;
}

.register-box {
  background-color: $background-color-white;
  padding: $spacing-extra-large;
  border-radius: $border-radius-large;
  box-shadow: $box-shadow-base;
}

.register-header {
  text-align: center;
  margin-bottom: $spacing-extra-large;

  .logo {
    width: 120px;
    margin-bottom: $spacing-base;
  }

  h2 {
    font-size: $font-size-extra-large;
    color: $text-primary;
    margin: 0;
  }
}

.register-form {
  .register-button {
    width: 100%;
    margin-top: $spacing-base;
  }
}

.agreement {
  margin: $spacing-base 0;
  color: $text-regular;
}

.other-options {
  margin-top: $spacing-base;
  text-align: center;
  color: $text-regular;
}

@media screen and (max-width: 480px) {
  .register-container {
    padding: $spacing-small;
  }

  .register-box {
    padding: $spacing-large;
  }
}
</style> 